<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>App用户行为数据分析</title>
    <link rel="stylesheet" href="/static/css/index.css">
    <script type="text/javascript" src="/static/js/vue.min.js"></script>
    <script type="text/javascript" src="/static/js/index.js"></script>
    <script type="text/javascript" src="/static/js/echarts.min.js"></script>
    <script type="text/javascript" src="/static/js/jquery.min.js"></script>
</head>
<body>

<div id="daapp">
    <el-dialog
            :visible.sync="dialogVisible"
            :fullscreen="false"
            :modal="false"
            :show-close="true"
            width="60%"
            center>
        <div id="mainxiao"
             style="width:100%; height:67vh;margin:0 auto;background-color:#fff;">
        </div>
    </el-dialog>
    <el-row>
        <el-col :span="24" style="text-align:center;">
            <div class="grid-content bg-purple-dark">
                <el-date-picker v-model="dateValue1" size="small" type="daterange" value-format="yyyy-MM-dd"
                                range-separator="至"
                                start-placeholder="开始日期" end-placeholder="结束日期" @change="changedate1">
                </el-date-picker>
                <el-select v-model="value" size="small" placeholder="请选择" @change="changedate4">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <div id="main" class="chart-container" style="width:95%;height:40vh;"></div>
                <div id="main6" class="chart-container" style="width:95%;height:40vh;"></div>
            </div>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="12" style="text-align:center;">
            <div class="grid-content bg-purple">
                <el-date-picker v-model="dateValue2" size="small" type="daterange" value-format="yyyy-MM-dd"
                                range-separator="至"
                                start-placeholder="开始日期" end-placeholder="结束日期" @change="changedate7">
                </el-date-picker>
                <div id="main3" class="chart-container"
                     style="width:100%; height:67vh;margin:0 auto;background-color:#fff;"></div>
            </div>
        </el-col>
        <el-col :span="12" style="text-align:center;">
            <div class="grid-content bg-purple">
                <el-date-picker
                        v-model="yuevalue2"
                        size="small"
                        type="month"
                        placeholder="选择月"
                        @change="changedate8">
                </el-date-picker>
                <div id="main4" class="chart-container"
                     style="width:100%;height:67vh;margin:0 auto;background-color:#fff;"></div>
            </div>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="24" style="text-align:center;">
            <div class="grid-content bg-purple-dark">
                <el-date-picker
                        v-model="yuevalue1"
                        size="small"
                        type="month"
                        placeholder="选择月"
                        @change="changedate2">
                </el-date-picker>
                <el-select v-model="value1" size="small" placeholder="请选择" @change="changedate5">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <div id="main1" class="chart-container" style="width:95%;height:40vh;"></div>
                <div id="main7" class="chart-container" style="width:95%;height:40vh;"></div>
            </div>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="24" style="text-align:center;">
            <div class="grid-content bg-purple-dark">
                <el-date-picker
                        v-model="nianvalue1"
                        size="small"
                        type="year"
                        placeholder="选择年"
                        @change="changedate3">
                </el-date-picker>
                <el-select v-model="value2" size="small" placeholder="请选择" @change="changedate6">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <div id="main2" class="chart-container" style="width:95%;height:40vh;"></div>
                <div id="main8" class="chart-container" style="width:95%;height:40vh;"></div>
            </div>
        </el-col>
    </el-row>
        <el-row>
        <el-col :span="12" style="text-align:center;">
            <div class="grid-content bg-purple">
                <el-date-picker
                        v-model="nianvalue2"
                        size="small"
                        type="year"
                        placeholder="选择年"
                        @change="changedate9">
                </el-date-picker>
                <div id="main5" class="chart-container"
                     style="width:100%;height:67vh;margin:0 auto;background-color:#fff;"></div>
            </div>
        </el-col>
        <el-col :span="12" style="text-align:center;">
            <div class="grid-content bg-purple"></div>
        </el-col>
    </el-row>
</div>
<script>
    new Vue({
        data() {
            return {
                dialogVisible: false,
                dateValue1: ["{{ start_date }}", "{{ end_date }}"],
                yuevalue1: "{{ year }}-{{ month }}",
                nianvalue1: "{{ year }}",
                dateValue2: ["{{ start_date }}", "{{ end_date }}"],
                yuevalue2: "{{ year }}-{{ month }}",
                nianvalue2: "{{ year }}",
                options: [{
                    value: 'mean',
                    label: '均值'
                }, {
                    value: 'sum',
                    label: '求和'
                }, {
                    value: 'std',
                    label: '标准差'
                }, {
                    value: 'var',
                    label: '方差'
                }, {
                    value: 'sem',
                    label: '均值标准误'
                }],
                value: 'mean',
                value1: 'mean',
                value2: 'mean',
            }
        },
        mounted() {
            this.huoqushuju("{{ start_date }}", "{{ end_date }}", this.value);
            this.huoqushuju6("{{ start_date }}", "{{ end_date }}", this.value);
            this.huoqushuju1("{{ year }}", "{{ month }}", this.value1);
            this.huoqushuju7("{{ year }}", "{{ month }}", this.value1);
            this.huoqushuju2("{{ year }}", this.value2);
            this.huoqushuju8("{{ year }}", this.value2);
            this.huoqushuju3("{{ start_date }}", "{{ end_date }}");
            this.huoqushuju4("{{ year }}", "{{ month }}");
            this.huoqushuju5("{{ year }}", this.value2);

        },
        methods: {
            changedate1(data) {
                this.huoqushuju(new Date(data[0]).toLocaleString().replace(/:\d{1,2}$/, ' '), new Date(data[1]).toLocaleString().replace(/:\d{1,2}$/, ' '), this.value);
                this.huoqushuju6(new Date(data[0]).toLocaleString().replace(/:\d{1,2}$/, ' '), new Date(data[1]).toLocaleString().replace(/:\d{1,2}$/, ' '), this.value);
            }, changedate2(data) {
                this.huoqushuju1(new Date(data).getFullYear(), (new Date(data).getMonth() + 1), this.value1);
                this.huoqushuju7(new Date(data).getFullYear(), (new Date(data).getMonth() + 1), this.value1);
            }, changedate3(data) {
                this.huoqushuju2(new Date(data).getFullYear(), this.value2);
                this.huoqushuju8(new Date(data).getFullYear(), this.value2);
            }, changedate4(value) {
                this.huoqushuju(new Date(this.dateValue1[0]).toLocaleString().replace(/:\d{1,2}$/, ' '), new Date(this.dateValue1[1]).toLocaleString().replace(/:\d{1,2}$/, ' '), value);
            }, changedate5(value) {
                this.huoqushuju1(new Date(this.yuevalue1).getFullYear(), (new Date(this.yuevalue1).getMonth() + 1), value);
            }, changedate6(value) {
                this.huoqushuju2(new Date(this.nianvalue1).getFullYear(), value);
            }, changedate7(data) {
                this.huoqushuju3(new Date(data[0]).toLocaleString().replace(/:\d{1,2}$/, ' '), new Date(data[1]).toLocaleString().replace(/:\d{1,2}$/, ' '));
            }, changedate8(data) {
                this.huoqushuju4(new Date(data).getFullYear(), (new Date(data).getMonth() + 1));
            }, changedate9(data) {
                this.huoqushuju5(new Date(data).getFullYear());
            },huoqushuju(dater1, dater2, value41) {
                var chartDom = document.getElementById('main');
                var myChart = echarts.init(chartDom);
                var that = this;
                $.ajax({
                    type: 'get',
                    url: "http://127.0.0.1:8000/getDataByKey/?type=yemianfenxi&start_date=" + dater1 + "&end_date=" + dater2 + "&shuming=" + value41,//这里是url
                    dataType: 'json',
                    async: true,
                    success: function (datat, heads, status) {
                        //console.log(datat);
                        var option = {
                            title: [
                                {
                                    text: '页面分析-日期段',
                                    left: 'center'
                                },
                                {
                                    subtext: '访问次数',
                                    left: '16.67%',
                                    top: '90%',
                                    textAlign: 'center'
                                },
                                {
                                    subtext: '页面跳出率',
                                    left: '50%',
                                    top: '90%',
                                    textAlign: 'center'
                                },
                                {
                                    subtext: '平均停留时间',
                                    left: '83.33%',
                                    top: '90%',
                                    textAlign: 'center'
                                }
                            ], tooltip: {
                                trigger: 'item'
                            },
                            series: [
                                {
                                    type: 'pie',
                                    radius: '75%',
                                    center: ['50%', '50%'],
                                    data: datat.data.fangwencishu,
                                    label: {
                                        position: 'outer',
                                        alignTo: '访问次数',
                                        bleedMargin: 5
                                    },
                                    left: 0,
                                    right: '66.6667%',
                                    top: 0,
                                    bottom: 0
                                },
                                {
                                    type: 'pie',
                                    radius: '75%',
                                    center: ['50%', '50%'],
                                    data: datat.data.yemiantiaochulv,
                                    label: {
                                        position: 'outer',
                                        alignTo: '页面跳出率',
                                        bleedMargin: 5
                                    },
                                    left: '33.3333%',
                                    right: '33.3333%',
                                    top: 0,
                                    bottom: 0
                                },
                                {
                                    type: 'pie',
                                    radius: '75%',
                                    center: ['50%', '50%'],
                                    data: datat.data.pingjvtinngliushijian,
                                    label: {
                                        position: 'outer',
                                        alignTo: '平均停留时间',
                                        margin: 20
                                    },
                                    left: '66.6667%',
                                    right: 0,
                                    top: 0,
                                    bottom: 0
                                }
                            ]
                        };
                        option && myChart.setOption(option,true);
                        myChart.on('click', function (params) {
                            var arryid = params.componentIndex;
                            that.dialogVisible = true;
                            setTimeout(function () {
                                var chartDomxiao = document.getElementById('mainxiao');
                                var myChartxiao = echarts.init(chartDomxiao);
                                var optionxiao = {
                                    title: {
                                        text: option.title[arryid + 1].subtext,
                                        left: 'center'
                                    },
                                    toolbox: {
                                        right: 50,
                                        feature: {
                                            myFull: {
                                                show: true,
                                                title: '全屏',
                                                icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
                                                onclick: (e) => {
                                                    // 全屏查看
                                                    if (chartDomxiao.requestFullScreen) { // HTML W3C 提议
                                                        chartDomxiao.requestFullScreen()
                                                    } else if (chartDomxiao.msRequestFullscreen) { // IE11
                                                        chartDomxiao.msRequestFullScreen()
                                                    } else if (chartDomxiao.webkitRequestFullScreen) { // Webkit
                                                        chartDomxiao.webkitRequestFullScreen()
                                                    } else if (chartDomxiao.mozRequestFullScreen) { // Firefox
                                                        chartDomxiao.mozRequestFullScreen()
                                                    }
                                                    // 退出全屏
                                                    if (chartDomxiao.requestFullScreen) {
                                                        document.exitFullscreen()
                                                    } else if (chartDomxiao.msRequestFullScreen) {
                                                        document.msExitFullscreen()
                                                    } else if (chartDomxiao.webkitRequestFullScreen) {
                                                        document.webkitCancelFullScreen()
                                                    } else if (chartDomxiao.mozRequestFullScreen) {
                                                        document.mozCancelFullScreen()
                                                    }
                                                }
                                            }
                                        }
                                    },
                                    tooltip: {
                                        trigger: 'item'
                                    },
                                    legend: {
                                        orient: 'vertical',
                                        left: 'left'
                                    },
                                    series: [
                                        {
                                            type: 'pie',
                                            radius: '85%',
                                            data: option.series[arryid].data,
                                            emphasis: {
                                                itemStyle: {
                                                    shadowBlur: 10,
                                                    shadowOffsetX: 0,
                                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                                }
                                            }
                                        }
                                    ]
                                };
                                optionxiao && myChartxiao.setOption(optionxiao,true);
                                window.onresize = function () {
                                    myChartxiao.resize()
                                }
                            }, 100);
                        });

                    }
                });
            }, huoqushuju1(dater1, dater2, value42) {
                var chartDom1 = document.getElementById('main1');
                var myChart1 = echarts.init(chartDom1);
                var that = this;
                $.ajax({
                    type: 'get',
                    url: "http://127.0.0.1:8000/getDataByKey/?type=yueyemianfenxi&year=" + dater1 + "&month=" + dater2 + "&shuming=" + value42,//这里是url
                    dataType: 'json',
                    async: true,
                    success: function (datat, heads, status) {
                        //console.log(datat);
                        var option = {
                            title: [
                                {
                                    text: '页面分析-年月',
                                    left: 'center'
                                },
                                {
                                    subtext: '访问次数',
                                    left: '16.67%',
                                    top: '90%',
                                    textAlign: 'center'
                                },
                                {
                                    subtext: '页面跳出率',
                                    left: '50%',
                                    top: '90%',
                                    textAlign: 'center'
                                },
                                {
                                    subtext: '平均停留时间',
                                    left: '83.33%',
                                    top: '90%',
                                    textAlign: 'center'
                                }
                            ], tooltip: {
                                trigger: 'item'
                            },
                            series: [
                                {
                                    type: 'pie',
                                    radius: '75%',
                                    center: ['50%', '50%'],
                                    data: datat.data.fangwencishu,
                                    label: {
                                        position: 'outer',
                                        alignTo: '访问次数',
                                        bleedMargin: 5
                                    },
                                    left: 0,
                                    right: '66.6667%',
                                    top: 0,
                                    bottom: 0
                                },
                                {
                                    type: 'pie',
                                    radius: '75%',
                                    center: ['50%', '50%'],
                                    data: datat.data.yemiantiaochulv,
                                    label: {
                                        position: 'outer',
                                        alignTo: '页面跳出率',
                                        bleedMargin: 5
                                    },
                                    left: '33.3333%',
                                    right: '33.3333%',
                                    top: 0,
                                    bottom: 0
                                },
                                {
                                    type: 'pie',
                                    radius: '75%',
                                    center: ['50%', '50%'],
                                    data: datat.data.pingjvtinngliushijian,
                                    label: {
                                        position: 'outer',
                                        alignTo: '平均停留时间',
                                        margin: 20
                                    },
                                    left: '66.6667%',
                                    right: 0,
                                    top: 0,
                                    bottom: 0
                                }
                            ]
                        };
                        option && myChart1.setOption(option,true);
                        myChart1.on('click', function (params) {
                            var arryid = params.componentIndex;
                            that.dialogVisible = true;
                            setTimeout(function () {
                                var chartDomxiao = document.getElementById('mainxiao');
                                var myChartxiao = echarts.init(chartDomxiao);
                                var optionxiao = {
                                    title: {
                                        text: option.title[arryid + 1].subtext,
                                        left: 'center'
                                    },
                                    toolbox: {
                                        right: 50,
                                        feature: {
                                            myFull: {
                                                show: true,
                                                title: '全屏',
                                                icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
                                                onclick: (e) => {
                                                    // 全屏查看
                                                    if (chartDomxiao.requestFullScreen) { // HTML W3C 提议
                                                        chartDomxiao.requestFullScreen()
                                                    } else if (chartDomxiao.msRequestFullscreen) { // IE11
                                                        chartDomxiao.msRequestFullScreen()
                                                    } else if (chartDomxiao.webkitRequestFullScreen) { // Webkit
                                                        chartDomxiao.webkitRequestFullScreen()
                                                    } else if (chartDomxiao.mozRequestFullScreen) { // Firefox
                                                        chartDomxiao.mozRequestFullScreen()
                                                    }
                                                    // 退出全屏
                                                    if (chartDomxiao.requestFullScreen) {
                                                        document.exitFullscreen()
                                                    } else if (chartDomxiao.msRequestFullScreen) {
                                                        document.msExitFullscreen()
                                                    } else if (chartDomxiao.webkitRequestFullScreen) {
                                                        document.webkitCancelFullScreen()
                                                    } else if (chartDomxiao.mozRequestFullScreen) {
                                                        document.mozCancelFullScreen()
                                                    }
                                                }
                                            }
                                        }
                                    },
                                    tooltip: {
                                        trigger: 'item'
                                    },
                                    legend: {
                                        orient: 'vertical',
                                        left: 'left'
                                    },
                                    series: [
                                        {
                                            type: 'pie',
                                            radius: '85%',
                                            data: option.series[arryid].data,
                                            emphasis: {
                                                itemStyle: {
                                                    shadowBlur: 10,
                                                    shadowOffsetX: 0,
                                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                                }
                                            }
                                        }
                                    ]
                                };
                                optionxiao && myChartxiao.setOption(optionxiao,true);
                                window.onresize = function () {
                                    myChartxiao.resize()
                                }
                            }, 100);
                        });

                    }
                });
            }, huoqushuju2(dater1, value43) {
                var chartDom2 = document.getElementById('main2');
                var myChart2 = echarts.init(chartDom2);
                var that = this;
                $.ajax({
                    type: 'get',
                    url: "http://127.0.0.1:8000/getDataByKey/?type=nianyemianfenxi&year=" + dater1 + "&shuming=" + value43,//这里是url
                    dataType: 'json',
                    async: true,
                    success: function (datat, heads, status) {
                        //console.log(datat);
                        var option = {
                            title: [
                                {
                                    text: '页面分析-年',
                                    left: 'center'
                                },
                                {
                                    subtext: '访问次数',
                                    left: '16.67%',
                                    top: '90%',
                                    textAlign: 'center'
                                },
                                {
                                    subtext: '页面跳出率',
                                    left: '50%',
                                    top: '90%',
                                    textAlign: 'center'
                                },
                                {
                                    subtext: '平均停留时间',
                                    left: '83.33%',
                                    top: '90%',
                                    textAlign: 'center'
                                }
                            ], tooltip: {
                                trigger: 'item'
                            },
                            series: [
                                {
                                    type: 'pie',
                                    radius: '75%',
                                    center: ['50%', '50%'],
                                    data: datat.data.fangwencishu,
                                    label: {
                                        position: 'outer',
                                        alignTo: '访问次数',
                                        bleedMargin: 5
                                    },
                                    left: 0,
                                    right: '66.6667%',
                                    top: 0,
                                    bottom: 0
                                },
                                {
                                    type: 'pie',
                                    radius: '75%',
                                    center: ['50%', '50%'],
                                    data: datat.data.yemiantiaochulv,
                                    label: {
                                        position: 'outer',
                                        alignTo: '页面跳出率',
                                        bleedMargin: 5
                                    },
                                    left: '33.3333%',
                                    right: '33.3333%',
                                    top: 0,
                                    bottom: 0
                                },
                                {
                                    type: 'pie',
                                    radius: '75%',
                                    center: ['50%', '50%'],
                                    data: datat.data.pingjvtinngliushijian,
                                    label: {
                                        position: 'outer',
                                        alignTo: '平均停留时间',
                                        margin: 20
                                    },
                                    left: '66.6667%',
                                    right: 0,
                                    top: 0,
                                    bottom: 0
                                }
                            ]
                        };
                        option && myChart2.setOption(option,true);
                        myChart2.on('click', function (params) {
                            var arryid = params.componentIndex;
                            that.dialogVisible = true;
                            setTimeout(function () {
                                var chartDomxiao = document.getElementById('mainxiao');
                                var myChartxiao = echarts.init(chartDomxiao);
                                var optionxiao = {
                                    title: {
                                        text: option.title[arryid + 1].subtext,
                                        left: 'center'
                                    },
                                    toolbox: {
                                        right: 50,
                                        feature: {
                                            myFull: {
                                                show: true,
                                                title: '全屏',
                                                icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
                                                onclick: (e) => {
                                                    // 全屏查看
                                                    if (chartDomxiao.requestFullScreen) { // HTML W3C 提议
                                                        chartDomxiao.requestFullScreen()
                                                    } else if (chartDomxiao.msRequestFullscreen) { // IE11
                                                        chartDomxiao.msRequestFullScreen()
                                                    } else if (chartDomxiao.webkitRequestFullScreen) { // Webkit
                                                        chartDomxiao.webkitRequestFullScreen()
                                                    } else if (chartDomxiao.mozRequestFullScreen) { // Firefox
                                                        chartDomxiao.mozRequestFullScreen()
                                                    }
                                                    // 退出全屏
                                                    if (chartDomxiao.requestFullScreen) {
                                                        document.exitFullscreen()
                                                    } else if (chartDomxiao.msRequestFullScreen) {
                                                        document.msExitFullscreen()
                                                    } else if (chartDomxiao.webkitRequestFullScreen) {
                                                        document.webkitCancelFullScreen()
                                                    } else if (chartDomxiao.mozRequestFullScreen) {
                                                        document.mozCancelFullScreen()
                                                    }
                                                }
                                            }
                                        }
                                    },
                                    tooltip: {
                                        trigger: 'item'
                                    },
                                    legend: {
                                        orient: 'vertical',
                                        left: 'left'
                                    },
                                    series: [
                                        {
                                            type: 'pie',
                                            radius: '85%',
                                            data: option.series[arryid].data,
                                            emphasis: {
                                                itemStyle: {
                                                    shadowBlur: 10,
                                                    shadowOffsetX: 0,
                                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                                }
                                            }
                                        }
                                    ]
                                };
                                optionxiao && myChartxiao.setOption(optionxiao,true);
                                window.onresize = function () {
                                    myChartxiao.resize()
                                }
                            }, 100);
                        });

                    }
                });
            }, huoqushuju3(dater1, dater2) {
                var chartDom3 = document.getElementById('main3');
                var myChart3 = echarts.init(chartDom3);
                $.ajax({
                    type: 'get',
                    url: "http://127.0.0.1:8000/getDataByKey/?type=atyemianlujing&start_date=" + dater1 + "&end_date=" + dater2,//这里是url
                    dataType: 'json',
                    async: true,
                    success: function (datat, heads, status) {
                        //console.log(datat);
                        var option = {
                            title: {
                                text: '页面路径-日期段'
                            },
                            toolbox: {
                                right: 50,
                                feature: {
                                    myFull: {
                                        show: true,
                                        title: '全屏',
                                        icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
                                        onclick: (e) => {
                                            // 全屏查看
                                            if (chartDom3.requestFullScreen) { // HTML W3C 提议
                                                chartDom3.requestFullScreen()
                                            } else if (chartDom3.msRequestFullscreen) { // IE11
                                                chartDom3.msRequestFullScreen()
                                            } else if (chartDom3.webkitRequestFullScreen) { // Webkit
                                                chartDom3.webkitRequestFullScreen()
                                            } else if (chartDom3.mozRequestFullScreen) { // Firefox
                                                chartDom3.mozRequestFullScreen()
                                            }
                                            // 退出全屏
                                            if (chartDom3.requestFullScreen) {
                                                document.exitFullscreen()
                                            } else if (chartDom3.msRequestFullScreen) {
                                                document.msExitFullscreen()
                                            } else if (chartDom3.webkitRequestFullScreen) {
                                                document.webkitCancelFullScreen()
                                            } else if (chartDom3.mozRequestFullScreen) {
                                                document.mozCancelFullScreen()
                                            }
                                            window.onresize = function () {
                                                myChart3.resize()
                                            }
                                        }
                                    }
                                }
                            },
                            tooltip: {
                                trigger: 'item',
                                triggerOn: 'mousemove'
                            },
                            series: [
                                {
                                    type: 'sankey',
                                    data: datat.data.yemianlie,
                                    links: datat.data.yemianguanxi,
                                    emphasis: {
                                        focus: 'adjacency'
                                    },
                                    lineStyle: {
                                        color: 'gradient',
                                        curveness: 0.5
                                    }
                                }
                            ]
                        };
                        option && myChart3.setOption(option,true);

                    }
                });
            }, huoqushuju4(dater1, dater2) {
                var chartDom4 = document.getElementById('main4');
                var myChart4 = echarts.init(chartDom4);
                $.ajax({
                    type: 'get',
                    url: "http://127.0.0.1:8000/getDataByKey/?type=yueyemianlujing&year=" + dater1 + "&month=" + dater2,//这里是url
                    dataType: 'json',
                    async: true,
                    success: function (datat, heads, status) {
                        //console.log(datat);
                        var option = {
                            title: {
                                text: '页面路径-年月'
                            },
                            toolbox: {
                                right: 50,
                                feature: {
                                    myFull: {
                                        show: true,
                                        title: '全屏',
                                        icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
                                        onclick: (e) => {
                                            // 全屏查看
                                            if (chartDom4.requestFullScreen) { // HTML W3C 提议
                                                chartDom4.requestFullScreen()
                                            } else if (chartDom4.msRequestFullscreen) { // IE11
                                                chartDom4.msRequestFullScreen()
                                            } else if (chartDom4.webkitRequestFullScreen) { // Webkit
                                                chartDom4.webkitRequestFullScreen()
                                            } else if (chartDom4.mozRequestFullScreen) { // Firefox
                                                chartDom4.mozRequestFullScreen()
                                            }
                                            // 退出全屏
                                            if (chartDom4.requestFullScreen) {
                                                document.exitFullscreen()
                                            } else if (chartDom4.msRequestFullScreen) {
                                                document.msExitFullscreen()
                                            } else if (chartDom4.webkitRequestFullScreen) {
                                                document.webkitCancelFullScreen()
                                            } else if (chartDom4.mozRequestFullScreen) {
                                                document.mozCancelFullScreen()
                                            }
                                            window.onresize = function () {
                                                myChart4.resize()
                                            }
                                        }
                                    }
                                }
                            },
                            tooltip: {
                                trigger: 'item',
                                triggerOn: 'mousemove'
                            },
                            series: [
                                {
                                    type: 'sankey',
                                    data: datat.data.yemianlie,
                                    links: datat.data.yemianguanxi,
                                    emphasis: {
                                        focus: 'adjacency'
                                    },
                                    lineStyle: {
                                        color: 'gradient',
                                        curveness: 0.5
                                    }
                                }
                            ]
                        };
                        option && myChart4.setOption(option,true);
                    }
                });
            }, huoqushuju5(dater1) {
                var chartDom5 = document.getElementById('main5');
                var myChart5 = echarts.init(chartDom5);
                $.ajax({
                    type: 'get',
                    url: "http://127.0.0.1:8000/getDataByKey/?type=nianyemianlujing&year=" + dater1,//这里是url
                    dataType: 'json',
                    async: true,
                    success: function (datat, heads, status) {
                        //console.log(datat);
                        var option = {
                            title: {
                                text: '页面路径-年'
                            },
                            toolbox: {
                                right: 50,
                                feature: {
                                    myFull: {
                                        show: true,
                                        title: '全屏',
                                        icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
                                        onclick: (e) => {
                                            // 全屏查看
                                            if (chartDom5.requestFullScreen) { // HTML W3C 提议
                                                chartDom5.requestFullScreen()
                                            } else if (chartDom5.msRequestFullscreen) { // IE11
                                                chartDom5.msRequestFullScreen()
                                            } else if (chartDom5.webkitRequestFullScreen) { // Webkit
                                                chartDom5.webkitRequestFullScreen()
                                            } else if (chartDom5.mozRequestFullScreen) { // Firefox
                                                chartDom5.mozRequestFullScreen()
                                            }
                                            // 退出全屏
                                            if (chartDom5.requestFullScreen) {
                                                document.exitFullscreen()
                                            } else if (chartDom5.msRequestFullScreen) {
                                                document.msExitFullscreen()
                                            } else if (chartDom5.webkitRequestFullScreen) {
                                                document.webkitCancelFullScreen()
                                            } else if (chartDom5.mozRequestFullScreen) {
                                                document.mozCancelFullScreen()
                                            }
                                            window.onresize = function () {
                                                myChart5.resize()
                                            }
                                        }
                                    }
                                }
                            },
                            tooltip: {
                                trigger: 'item',
                                triggerOn: 'mousemove'
                            },
                            series: [
                                {
                                    type: 'sankey',
                                    data: datat.data.yemianlie,
                                    links: datat.data.yemianguanxi,
                                    emphasis: {
                                        focus: 'adjacency'
                                    },
                                    lineStyle: {
                                        color: 'gradient',
                                        curveness: 0.5
                                    }
                                }
                            ]
                        };
                        option && myChart5.setOption(option,true);
                    }
                });
            },huoqushuju6(dater1, dater2, value41) {
                var chartDom6 = document.getElementById('main6');
                var myChart6 = echarts.init(chartDom6);
                var that = this;
                $.ajax({
                    type: 'get',
                    url: "http://127.0.0.1:8000/getDataByKey/?type=atshiyongxiguan&start_date=" + dater1 + "&end_date=" + dater2 + "&shuming=" + value41,//这里是url
                    dataType: 'json',
                    async: true,
                    success: function (datat, heads, status) {
                        //console.log(datat);
                        var option = {
                            title: [
                                {
                                    text: '使用习惯-日期段',
                                    left: 'center'
                                },
                                {
                                    subtext: '访问深度',
                                    left: '16.67%',
                                    top: '90%',
                                    textAlign: 'center'
                                },
                                {
                                    subtext: '使用时长',
                                    left: '50%',
                                    top: '90%',
                                    textAlign: 'center'
                                },
                                {
                                    subtext: '使用频率',
                                    left: '83.33%',
                                    top: '90%',
                                    textAlign: 'center'
                                }
                            ], tooltip: {
                                trigger: 'item'
                            },
                            series: [
                                {
                                    type: 'pie',
                                    radius: '75%',
                                    center: ['50%', '50%'],
                                    data: datat.data.time,
                                    label: {
                                        position: 'outer',
                                        alignTo: '访问深度',
                                        bleedMargin: 5
                                    },
                                    left: 0,
                                    right: '66.6667%',
                                    top: 0,
                                    bottom: 0
                                },
                                {
                                    type: 'pie',
                                    radius: '75%',
                                    center: ['50%', '50%'],
                                    data: datat.data.depth,
                                    label: {
                                        position: 'outer',
                                        alignTo: '使用时长',
                                        bleedMargin: 5
                                    },
                                    left: '33.3333%',
                                    right: '33.3333%',
                                    top: 0,
                                    bottom: 0
                                },
                                {
                                    type: 'pie',
                                    radius: '75%',
                                    center: ['50%', '50%'],
                                    data: datat.data.frequency,
                                    label: {
                                        position: 'outer',
                                        alignTo: '使用频率',
                                        margin: 20
                                    },
                                    left: '66.6667%',
                                    right: 0,
                                    top: 0,
                                    bottom: 0
                                }
                            ]
                        };
                        option && myChart6.setOption(option,true);
                        myChart6.on('click', function (params) {
                            var arryid = params.componentIndex;
                            that.dialogVisible = true;
                            setTimeout(function () {
                                var chartDomxiao = document.getElementById('mainxiao');
                                var myChartxiao = echarts.init(chartDomxiao);
                                var optionxiao = {
                                    title: {
                                        text: option.title[arryid + 1].subtext,
                                        left: 'center'
                                    },
                                    toolbox: {
                                        right: 50,
                                        feature: {
                                            myFull: {
                                                show: true,
                                                title: '全屏',
                                                icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
                                                onclick: (e) => {
                                                    // 全屏查看
                                                    if (chartDomxiao.requestFullScreen) { // HTML W3C 提议
                                                        chartDomxiao.requestFullScreen()
                                                    } else if (chartDomxiao.msRequestFullscreen) { // IE11
                                                        chartDomxiao.msRequestFullScreen()
                                                    } else if (chartDomxiao.webkitRequestFullScreen) { // Webkit
                                                        chartDomxiao.webkitRequestFullScreen()
                                                    } else if (chartDomxiao.mozRequestFullScreen) { // Firefox
                                                        chartDomxiao.mozRequestFullScreen()
                                                    }
                                                    // 退出全屏
                                                    if (chartDomxiao.requestFullScreen) {
                                                        document.exitFullscreen()
                                                    } else if (chartDomxiao.msRequestFullScreen) {
                                                        document.msExitFullscreen()
                                                    } else if (chartDomxiao.webkitRequestFullScreen) {
                                                        document.webkitCancelFullScreen()
                                                    } else if (chartDomxiao.mozRequestFullScreen) {
                                                        document.mozCancelFullScreen()
                                                    }
                                                }
                                            }
                                        }
                                    },
                                    tooltip: {
                                        trigger: 'item'
                                    },
                                    legend: {
                                        orient: 'vertical',
                                        left: 'left'
                                    },
                                    series: [
                                        {
                                            type: 'pie',
                                            radius: '85%',
                                            data: option.series[arryid].data,
                                            emphasis: {
                                                itemStyle: {
                                                    shadowBlur: 10,
                                                    shadowOffsetX: 0,
                                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                                }
                                            }
                                        }
                                    ]
                                };
                                optionxiao && myChartxiao.setOption(optionxiao,true);
                                window.onresize = function () {
                                    myChartxiao.resize()
                                }
                            }, 100);
                        });

                    }
                });
            }, huoqushuju7(dater1, dater2, value42) {
                var chartDom7 = document.getElementById('main7');
                var myChart7 = echarts.init(chartDom7);
                var that = this;
                $.ajax({
                    type: 'get',
                    url: "http://127.0.0.1:8000/getDataByKey/?type=yueshiyongxiguan&year=" + dater1 + "&month=" + dater2 + "&shuming=" + value42,//这里是url
                    dataType: 'json',
                    async: true,
                    success: function (datat, heads, status) {
                        //console.log(datat);
                        var option = {
                            title: [
                                {
                                    text: '使用习惯-年月',
                                    left: 'center'
                                },
                                {
                                    subtext: '访问深度',
                                    left: '16.67%',
                                    top: '90%',
                                    textAlign: 'center'
                                },
                                {
                                    subtext: '使用时长',
                                    left: '50%',
                                    top: '90%',
                                    textAlign: 'center'
                                },
                                {
                                    subtext: '使用频率',
                                    left: '83.33%',
                                    top: '90%',
                                    textAlign: 'center'
                                }
                            ], tooltip: {
                                trigger: 'item'
                            },
                            series: [
                                {
                                    type: 'pie',
                                    radius: '75%',
                                    center: ['50%', '50%'],
                                    data: datat.data.time,
                                    label: {
                                        position: 'outer',
                                        alignTo: '访问深度',
                                        bleedMargin: 5
                                    },
                                    left: 0,
                                    right: '66.6667%',
                                    top: 0,
                                    bottom: 0
                                },
                                {
                                    type: 'pie',
                                    radius: '75%',
                                    center: ['50%', '50%'],
                                    data: datat.data.depth,
                                    label: {
                                        position: 'outer',
                                        alignTo: '使用时长',
                                        bleedMargin: 5
                                    },
                                    left: '33.3333%',
                                    right: '33.3333%',
                                    top: 0,
                                    bottom: 0
                                },
                                {
                                    type: 'pie',
                                    radius: '75%',
                                    center: ['50%', '50%'],
                                    data: datat.data.frequency,
                                    label: {
                                        position: 'outer',
                                        alignTo: '使用频率',
                                        margin: 20
                                    },
                                    left: '66.6667%',
                                    right: 0,
                                    top: 0,
                                    bottom: 0
                                }
                            ]
                        };
                        option && myChart7.setOption(option,true);
                        myChart7.on('click', function (params) {
                            var arryid = params.componentIndex;
                            that.dialogVisible = true;
                            setTimeout(function () {
                                var chartDomxiao = document.getElementById('mainxiao');
                                var myChartxiao = echarts.init(chartDomxiao);
                                var optionxiao = {
                                    title: {
                                        text: option.title[arryid + 1].subtext,
                                        left: 'center'
                                    },
                                    toolbox: {
                                        right: 50,
                                        feature: {
                                            myFull: {
                                                show: true,
                                                title: '全屏',
                                                icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
                                                onclick: (e) => {
                                                    // 全屏查看
                                                    if (chartDomxiao.requestFullScreen) { // HTML W3C 提议
                                                        chartDomxiao.requestFullScreen()
                                                    } else if (chartDomxiao.msRequestFullscreen) { // IE11
                                                        chartDomxiao.msRequestFullScreen()
                                                    } else if (chartDomxiao.webkitRequestFullScreen) { // Webkit
                                                        chartDomxiao.webkitRequestFullScreen()
                                                    } else if (chartDomxiao.mozRequestFullScreen) { // Firefox
                                                        chartDomxiao.mozRequestFullScreen()
                                                    }
                                                    // 退出全屏
                                                    if (chartDomxiao.requestFullScreen) {
                                                        document.exitFullscreen()
                                                    } else if (chartDomxiao.msRequestFullScreen) {
                                                        document.msExitFullscreen()
                                                    } else if (chartDomxiao.webkitRequestFullScreen) {
                                                        document.webkitCancelFullScreen()
                                                    } else if (chartDomxiao.mozRequestFullScreen) {
                                                        document.mozCancelFullScreen()
                                                    }
                                                }
                                            }
                                        }
                                    },
                                    tooltip: {
                                        trigger: 'item'
                                    },
                                    legend: {
                                        orient: 'vertical',
                                        left: 'left'
                                    },
                                    series: [
                                        {
                                            type: 'pie',
                                            radius: '85%',
                                            data: option.series[arryid].data,
                                            emphasis: {
                                                itemStyle: {
                                                    shadowBlur: 10,
                                                    shadowOffsetX: 0,
                                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                                }
                                            }
                                        }
                                    ]
                                };
                                optionxiao && myChartxiao.setOption(optionxiao,true);
                                window.onresize = function () {
                                    myChartxiao.resize()
                                }
                            }, 100);
                        });

                    }
                });
            }, huoqushuju8(dater1, value43) {
                var chartDom8 = document.getElementById('main8');
                var myChart8 = echarts.init(chartDom8);
                var that = this;
                $.ajax({
                    type: 'get',
                    url: "http://127.0.0.1:8000/getDataByKey/?type=nianshiyongxiguan&year=" + dater1 + "&shuming=" + value43,//这里是url
                    dataType: 'json',
                    async: true,
                    success: function (datat, heads, status) {
                        //console.log(datat);
                        var option = {
                            title: [
                                {
                                    text: '使用习惯-年',
                                    left: 'center'
                                },
                                {
                                    subtext: '访问深度',
                                    left: '16.67%',
                                    top: '90%',
                                    textAlign: 'center'
                                },
                                {
                                    subtext: '使用时长',
                                    left: '50%',
                                    top: '90%',
                                    textAlign: 'center'
                                },
                                {
                                    subtext: '使用频率',
                                    left: '83.33%',
                                    top: '90%',
                                    textAlign: 'center'
                                }
                            ], tooltip: {
                                trigger: 'item'
                            },
                            series: [
                                {
                                    type: 'pie',
                                    radius: '75%',
                                    center: ['50%', '50%'],
                                    data: datat.data.time,
                                    label: {
                                        position: 'outer',
                                        alignTo: '访问深度',
                                        bleedMargin: 5
                                    },
                                    left: 0,
                                    right: '66.6667%',
                                    top: 0,
                                    bottom: 0
                                },
                                {
                                    type: 'pie',
                                    radius: '75%',
                                    center: ['50%', '50%'],
                                    data: datat.data.depth,
                                    label: {
                                        position: 'outer',
                                        alignTo: '使用时长',
                                        bleedMargin: 5
                                    },
                                    left: '33.3333%',
                                    right: '33.3333%',
                                    top: 0,
                                    bottom: 0
                                },
                                {
                                    type: 'pie',
                                    radius: '75%',
                                    center: ['50%', '50%'],
                                    data: datat.data.frequency,
                                    label: {
                                        position: 'outer',
                                        alignTo: '使用频率',
                                        margin: 20
                                    },
                                    left: '66.6667%',
                                    right: 0,
                                    top: 0,
                                    bottom: 0
                                }
                            ]
                        };
                        option && myChart8.setOption(option,true);
                        myChart8.on('click', function (params) {
                            var arryid = params.componentIndex;
                            that.dialogVisible = true;
                            setTimeout(function () {
                                var chartDomxiao = document.getElementById('mainxiao');
                                var myChartxiao = echarts.init(chartDomxiao);
                                var optionxiao = {
                                    title: {
                                        text: option.title[arryid + 1].subtext,
                                        left: 'center'
                                    },
                                    toolbox: {
                                        right: 50,
                                        feature: {
                                            myFull: {
                                                show: true,
                                                title: '全屏',
                                                icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
                                                onclick: (e) => {
                                                    // 全屏查看
                                                    if (chartDomxiao.requestFullScreen) { // HTML W3C 提议
                                                        chartDomxiao.requestFullScreen()
                                                    } else if (chartDomxiao.msRequestFullscreen) { // IE11
                                                        chartDomxiao.msRequestFullScreen()
                                                    } else if (chartDomxiao.webkitRequestFullScreen) { // Webkit
                                                        chartDomxiao.webkitRequestFullScreen()
                                                    } else if (chartDomxiao.mozRequestFullScreen) { // Firefox
                                                        chartDomxiao.mozRequestFullScreen()
                                                    }
                                                    // 退出全屏
                                                    if (chartDomxiao.requestFullScreen) {
                                                        document.exitFullscreen()
                                                    } else if (chartDomxiao.msRequestFullScreen) {
                                                        document.msExitFullscreen()
                                                    } else if (chartDomxiao.webkitRequestFullScreen) {
                                                        document.webkitCancelFullScreen()
                                                    } else if (chartDomxiao.mozRequestFullScreen) {
                                                        document.mozCancelFullScreen()
                                                    }
                                                }
                                            }
                                        }
                                    },
                                    tooltip: {
                                        trigger: 'item'
                                    },
                                    legend: {
                                        orient: 'vertical',
                                        left: 'left'
                                    },
                                    series: [
                                        {
                                            type: 'pie',
                                            radius: '85%',
                                            data: option.series[arryid].data,
                                            emphasis: {
                                                itemStyle: {
                                                    shadowBlur: 10,
                                                    shadowOffsetX: 0,
                                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                                }
                                            }
                                        }
                                    ]
                                };
                                optionxiao && myChartxiao.setOption(optionxiao,true);
                                window.onresize = function () {
                                    myChartxiao.resize()
                                }
                            }, 100);
                        });

                    }
                });
            },
        }
    }).$mount('#daapp')
</script>

</body>
</html>